<template>
	<view>
		<view class="page">
			<view class="area-header">
				<u-text text="收货地点">
				</u-text>
			</view>
			<u--form labelPosition="left" :model="umodel" ref="uForm" class="form" labelWidth="200rpx"
				errorType="toast">
				<u-form-item label="存储地点" prop="storageLocationId" @click="openStorageLocationSelect">
					<u--input v-model="umodel.storageLocationName" border="none" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择存储地点"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-line></u-line>
				<!-- 标准picker -->
				<u-picker :show="showPick" :columns="storageLocationPickActions" keyName="storageLocationName" immediateChange @cancel="showPick = false" @confirm="storageLocationSelect"></u-picker>
			</u--form>
			<view class="upload-scan">
				<scan-bar id="scanInput" ref="scanBarRef" placeholder="扫描包装条码" @code-scanned="getScanResult"
					:key="datekey"></scan-bar>
			</view>
			<view class="area-header">
				<u-text text="收货信息">
				</u-text>
				<u-text :text="'已收 ' + scannedData.length + '件'" align="right">
				</u-text>
			</view>
			<view class="list-content">
				<!-- 列表 -->
				<u-list class="list" v-if="scannedData.length > 0" :height="ListViewHeight">
					<u-list-item v-for="(detail, index) in scannedData" :key="detail.barCode">
						<view class="card">
							<view class="right">
								<view class="title">
									包装流水号: {{detail.packSerialNumber}}
								</view>
								<view class="body">
									供应商代码: {{detail.partnerCode}}
								</view>
								<view class="body">
									采购订单号: {{detail.nbrNumber}}
								</view>
								<view class="body">
									项号: {{detail.lineNumber}}
								</view>
								<view class="body">
									存货编码: {{ detail.materialNumber }}
								</view>
								<view class="body">
									数量: {{ detail.quantity }}
								</view>
								<view class="body">
									供应批次: {{detail.batchNumber}}
								</view>
								<view class="body">
									炉号: {{detail.supplyCode}}
								</view>
								<view class="body">
									装箱单号: {{detail.unitNumber}}
								</view>
								
							</view>
							<view class="left">
								<u-icon name="close-circle-fill" color="#f56c6c" size="30px" @click="removeDetail(index)"></u-icon>
							</view>
						</view>
						<u-line></u-line>
					</u-list-item>
				</u-list>
				<!-- 空数据 -->
				<u-list v-else :height="ListViewHeight">
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</u-list>
			</view>
			<u-line></u-line>
			<view class="search">
				<u-button type="primary" @click="confirmReceiveData" class="custom-style"
					:loading="posting">确定收货</u-button>
			</view>
		</view>
		<u-modal :show="messageShow" :closeOnClickOverlay="false" title="提示" content="是否要删除此包装"
			:showCancelButton="true" @confirm="messageConfirm" @cancel="messageCancel"></u-modal>
	</view>
</template>

<script setup lang="ts">
	import { reactive, computed, ref } from 'vue';
	import ScanBar from '@/components/scan-bar/index.vue';
	import { onShow } from '@dcloudio/uni-app';
	import { http } from "../../../utils/http";
	import { useWmsStore } from '@/stores/useWmsStore';

	// 重置表单信息 & 光标自动blur
	const scanBarRef = ref();
	const datekey = ref(new Date());
	const posting = ref(false);
	const ListViewHeight = ref(0);
	const messageShow = ref(false);
	const showPick = ref(false);
	const deleteIndex = ref(0);
	
	// 存储地点picker选择
	const storageLocationPickActions = reactive([]);
	// 表单数据定义
	const umodel = reactive({
		storageLocationId: '',
		storageLocationCode: '',
		storageLocationName: '',
	});
	
	const umodelBack = {
		storageLocationId: '',
		storageLocationCode: '',
		storageLocationName: '',
	};
	
	const scannedData = ref([]);

	onShow(async () => {
		ListViewHeight.value = uni.getSystemInfoSync().windowHeight - 160;
		console.log('ListViewHeight.value', ListViewHeight.value);
		reset();
		getStorageLocations();
	})
	
	function storageLocationSelect(e) {
		if (e.value.length) {
			umodel.storageLocationId = e.value[0].id;
			umodel.storageLocationCode = e.value[0].storageLocationCode;
			umodel.storageLocationName = e.value[0].storageLocationName;
		}
		showPick.value = false;
	}
	
	async function getStorageLocations() {
		const data = await http({
			url: '/wms/storagelocation/getListByUser/',
			method: 'GET',
			data: {}
		});
		console.log(data);
		storageLocationPickActions[0] = data.data
	}
	
	function openStorageLocationSelect() {
		showPick.value = true;
		uni.hideKeyboard();
	}
	
	// 获取扫码结果
	function getScanResult(result) {
		console.log('扫码结果', result);
		let scanRecord = {};
		let record = result.split("|");
		if (record.length < 7) {
			uni.$u.toast('扫描的包装条码不正确！');
			return;
		}
		console.log(record);
		scanRecord.partnerCode = record[0];
		scanRecord.nbrNumber = record[1];
		scanRecord.lineNumber = record[2];
		scanRecord.materialNumber = record[3];
		scanRecord.quantity = record[4];
		scanRecord.batchNumber = record[5];
		scanRecord.packSerialNumber = record[6];
		scanRecord.unitNumber = record[7];
		scanRecord.supplyCode = record[5];
		scanRecord.barCode = result;
		
		const samePartnerFlag = scannedData.value.find(item => item.partnercode === scanRecord.partnercode);
		if (scannedData.value.length > 0 && !samePartnerFlag) {
			uni.$u.toast('扫描的包装与其他包装的供应商不一致，不能同时收货！');
			return;
		}
		
		const sameStorageUnit = scannedData.value.find(item => item.barCode === scanRecord.barCode);
		if (sameStorageUnit) {
			uni.$u.toast('此包装已经扫描过！');
			return;
		}
		scannedData.value.splice(0, 0, scanRecord);
		scanBarRef.value.reset();
	}

	async function confirmReceiveData() {
		if (!umodel.storageLocationId) {
			uni.$u.toast('请先选择收货存储地点！');
			return;
		}
		if (scannedData.value.length <= 0) {
			uni.$u.toast('请先扫描包装条码！');
			return;
		} else {
			const data = await http({
				url: '/wms/rmreceipt/receive/',
				method: 'POST',
				data: {
					storageLocationId: umodel.storageLocationId,
					storageLocationCode: umodel.storageLocationCode,
					storageLocationName: umodel.storageLocationName,
					details: scannedData.value
				},
			});
			
			if(data.code == '200') {
				uni.$u.toast('收货成功！');
				reset();
			}	
		}
	}
	
	async function messageConfirm() {
		messageShow.value = false;
		scannedData.value.splice(deleteIndex.value, 1);
	}
	
	function messageCancel() {
		messageShow.value = false;
	}
	
	function removeDetail(index : any) {
		deleteIndex.value = index;
		messageShow.value = true;
	}
	
	function reset() {
		Object.assign(umodel, umodelBack);
		scannedData.value = [];
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
	}
	
	.form {
		padding: $uni-page-padding;
	}

	.upload-scan {
		padding: 10px 40rpx 10px 40rpx;
	}

	.area-header {
		color: #909193;
		padding: 10px 15px;
		margin-bottom: 0;
		font-size: 15px;
		background-color: #f3f4f6;
		display: flex;
	}

	.list-content {
		padding: $uni-page-padding;

		.list {
			.card {
				margin-top: 5px;
				margin-bottom: 10px;
				border-radius: 7px;
				display: flex;
				align-items: center;
				padding: 10px 0;
				transition: all 300ms ease;
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

				.left {
					// flex-basis: 90rpx;
					padding-right: 10px;
					text-align: right;
					font-size: 13px;

					.enter {
						line-height: 20px;
						margin-bottom: 5px;
					}

					.number {
						font-size: 13px;
						line-height: 18px;
					}

					:deep(.u-icon--right) {
						flex-direction: row-reverse;
					}
				}

				.right {
					flex: 1;
					padding-left: 15px;

					.title {
						font-size: 18px;
						line-height: 20px;
						margin-bottom: 5px;
						font-weight: 700;
					}

					.body {
						font-size: 14px;
						line-height: 18px;
					}
				}
			}
		}
	}

	.search {
		display: flex;
		flex: 1;

		.custom-style {
			// width: 120px;
			margin: 12px 5px 5px;
			height: 40px;
			border-radius: 8px;

			&:nth-child(1) {
				flex: 1
			}

			&:nth-child(2) {
				flex: 3
			}
		}
	}
</style>